<template>
  <view class="wrapper">
    <template v-for="(item, index) in list">
      <view class="item" :key="index" v-if="item.product">
        <view class="image" @click="handleView(item)">
          <u--image
              lazy-load width="100rpx"
              height="100rpx"
              :fade="true" duration="450"
              :src="baseUrl + item.product.mainImage.thumbnail_path"
              v-if="item.product.mainImage"></u--image>
        </view>
        <view class="desc" @click="handleView(item)">
          <view class="title one-lines">{{ item.product.title }}</view>
          <p class="price">￥{{ item.product.price * 1 }}</p>
          <view class="time">{{ item.create_time }}</view>
        </view>
        <view class="delete" @click="remove(item)">
          <u-button type="error" size="small" text="取 消"></u-button>
        </view>
      </view>
    </template>
    <view class="nothing" v-if="list.length === 0">暂无收藏...</view>
  </view>
</template>

<script>
import base64 from '../../util/base64'
import config from '../../config/config'
import Fav from '../../api/fav'
const favModel = new Fav()

export default {
  data() {
    return {
      baseUrl: config.baseUrl,
      list: [],
      queryList: {
        page: 0,
        pageSize: 10,
        busy: false
      }
    }
  },
  onReachBottom() {
    this.getList(true)
  },
  onLoad() {
    this.getList()
  },
  methods: {
    getList(append = false) {
      if (this.queryList.busy === false) {
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        favModel.list({
          ...this.queryList
        }).then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.queryList.busy = true
          } else {
            this.queryList.busy = false
            if (append) {
              this.list = this.list.concat(data.list)
            } else {
              this.list = data.list
            }
          }
          // console.log(this.list)
        })
      }
    },
    handleView(item) {
      uni.navigateTo({
        url: `/sub_product/detail/index?id=${item.product.id}`
      })
    },
    remove(item) {
      favModel.removeFavorite({ id: item.product.id }).then(() => {
        uni.showToast({
          icon: 'none',
          title: '取消成功'
        })
        this.list = this.list.filter(x => x.id !== item.id)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  background: $background_color;
  padding: 20rpx;
  font-size: 24rpx;
  .nothing {
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    border-radius: 10rpx;
    color: #ccc;
  }
  .item {
    background: white;
    padding: 20rpx;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
    .image {
      width: 100rpx;
    }
    .desc {
      flex: 1;
      padding: 0 10px;
      //background: red;
      .title {
        font-weight: 700;
        //height: 30px;
        line-height: 20px;
      }
      .time {
        color: #ccc;
      }
    }
    .delete {
      width: 70px;
    }
  }
}
</style>
